<template>
  <div>
    <el-dialog
      title="上传文件"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="40%"
      :lock-scroll="false"
      v-dialogDrag
      :before-close="close"
      append-to-body
    >
      <el-form
        ref="ruleFormRef"
        :inline="true"
        v-model="fileUpload"
        class="el-form-no"
        :label-width="allData.labelWidth"
      >
        <div v-if="allData.isMethod ? allData.isMethod : false">
          <el-form-item
            class="p-b"
            :label="
              allData.isMethodLabel ? allData.isMethodLabel : '选择方式：'
            "
          >
            <el-radio-group v-model="isMethodType" @change="changeMethod">
              <el-radio :label="1">实名投票</el-radio>
              <el-radio :label="2">匿名投票</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="first">
          <el-form-item :label="allData.label" prop="name">
            <el-input
              v-model="fileUpload.name"
              clearable
              autocomplete="off"
              :placeholder="
                allData.placeholderString
                  ? allData.placeholderString
                  : '未选择任何文件'
              "
              disabled
            />
            <div v-if="allData.ifDownload" class="download-file">
              <el-button type="text" @click="download">
                {{
                  isMethodType == 2
                    ? allData.anonymousDownloadText
                    : allData.downloadText
                }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-upload
              ref="uploadRef"
              class="upload-demo"
              action="#"
              :limit="1"
              :on-change="handleChange"
              :auto-upload="false"
              :show-file-list="false"
              :on-exceed="handleExceed"
              :accept="allData.accept"
            >
              <template #trigger>
                <el-button type="primary">选择文件</el-button>
              </template>
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取消</el-button>
        <el-button
          :loading="loading"
          size="small"
          type="primary"
          :disabled="!fileUpload.name"
          @click="save"
        >
          导入
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    allData: {
      type: Object,
      default: () => {
        return {
          placeholderString: "选择导入文件",
          labelWidth: "120px",
          downloadText: "下载模板",
          ifDownload: false,
          accept: "",
          errorHint: "请导入正确格式的文件",
        };
      },
    },
  },
  data() {
    return {
      loading: false,
      fileUpload: {},
      dialogVisible: true,
      isMethodType: 1,
    };
  },
  methods: {
    changeMethod() {
      this.fileUpload = {};
    },
    download() {
      this.$emit("download", this.isMethodType);
    },
    handleChange(file) {
      const name = file.raw.name.slice(-3) || "";
      const _accept = this.allData.accept || "";
      if (_accept) {
        // 有导入格式限制
        if (_accept.indexOf(name) > -1) {
          this.fileUpload = file.raw;
        } else {
          this.$message({
            type: "error",
            message: `请导入.zip或.rar格式的文件`,
            duration: 3 * 1000,
          });
          this.$refs.uploadRef.clearFiles();
        }
      } else {
        // 无导入格式限制
        this.fileUpload = file.raw;
      }
    },
    // 多次上传覆盖
    handleExceed(file) {
      this.$refs.uploadRef.clearFiles();
      this.fileUpload = file[0];
    },
    close() {
      this.fileUpload = {};
      this.loading = false;
      this.$emit("closeDialog");
    },
    save() {
      this.$emit("importFileFun", this.fileUpload, this.isMethodType);
    },
    changeLoading() {
      this.loading = !this.loading;
    },
  },
};
</script>

<style lang="less" scoped>
.dialog-footer {
  text-align: center;
}
:deep(.el-form-item__content) {
  line-height: 30px !important;
}
:deep(.first) {
  display: flex;
  .el-form-item:nth-child(1) {
    flex: 1;
    .el-form-item__content {
      width: 75%;
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>
